<template>
  <view>
    <view class="phone-header">
      <image src="../images/lifepayBg.474226aa.png" mode="widthFix" style="width: 100%; display: flex"></image>
    </view>
    <view style="padding: 20upx; margin-top: -180upx; position: relative; z-index: 22">
      <view class="phone-container">
        <view class="phone-container-top">
          <view class="phone-container-top_title flex">
            <u-icon name="home-fill" color="#42B993"></u-icon>
            <view style="color: #42b993">电费充值</view>
          </view>
        </view>
        <!-- <view class="phone-container-group" style="padding-top: 20upx">
          <view class="phone-container-group_list">
            <view
              class="phone-container-group_list-item base-4"
              style="padding: 10upx 0"
              :class="life_type == item.key ? 'select' : ''"
              v-for="item in lifeList"
              :key="item.id"
              @click="
                lifeTypeChange(item.key, item.name)
                opSelect = 'gw'
              "
            >
              <text>{{ item.name }}</text>
            </view>
            <view class="base-4"></view>
            <view class="base-4"></view>
          </view>
        </view> -->
        <view class="phone-container-group" style="padding-top: 20upx" v-show="life_type == 'electric'">
          <view class="phone-container-group_list">
            <view
              class="phone-container-group_list-item base-4"
              style="padding: 10upx 0"
              :class="opSelect == item.key ? 'select' : ''"
              v-for="item in operatorList"
              :key="item.id"
              @click="opSelectChange(item.key)"
            >
              <text>{{ item.name }}</text>
            </view>
            <view class="base-4"></view>
            <view class="base-4"></view>
          </view>
        </view>
        <view class="phone-container-input">
          <input v-model="phone" placeholder="请填写充值户号" />
        </view>
        <view class="phone-container-input" v-show="opSelect == 'nw'">
          <input v-model="idcard" placeholder="请填写身份证后六位" />
        </view>

        <view class="phone-container-input">
          <uni-data-picker :localdata="pickerItems" :border="false" :placeholder="regiondata || ''" @change="regionchange">
            <text style="font-size: 36upx" :class="regionName ? '' : 'color1'">{{ regiondata ? regiondata : '选择城市' }}</text>
          </uni-data-picker>
        </view>

        <view class="phone-container-group">
          <view class="phone-container-group_title">
            <text>充值套餐</text>
          </view>
          <view class="phone-container-group_list m-b-50">
            <view
              class="phone-container-group_list-item base-3"
              :class="packageSelect == item.id ? 'select' : ''"
              v-for="item in packageList"
              :key="item.id"
              @click="packageSelectChange(item.id, item.now_money)"
            >
              <view>
                <text style="font-size: 36upx; font-weight: bold">{{ item.name }}</text>
              </view>
              <view style="margin-top: 0">
                <text style="font-size: 24upx; padding: 0 10upx">售价{{ item.now_money }}元</text>
              </view>
            </view>
            <view class="base-3"></view>
          </view>
          <u-button text="立即充值" color="#42B993" @click="onSubmit"></u-button>
        </view>
        <!-- 临时注释 -->
        <!-- <view class="flex" style="justify-content: space-between; margin-top: 50rpx">
          <checkbox-group @change="checkboxChange">
            <label>
              <checkbox value="true" :checked="greenPointsProtocol" /><text class="f1">已阅读<text style="color: red" @tap="gotoLink">《协议》</text>并接收积分 </text>
            </label>
          </checkbox-group>

          <view class="flex">
            <view>记住选择</view>
            <u-switch v-model="Uswitch" @change="changeUswitch" size="20" activeColor="#FD5C59"></u-switch>
          </view>
        </view> -->
      </view>
    </view>
    <view style="padding: 8rpx 0">
      <dp :pagecontent="pagecontent"></dp>
    </view>
    <!-- <view style="height: 130upx"></view>
    <view class="phone-fix-btm">
      <view class="phone-fix-btm-left">
        <view>
          合计：<text>¥{{ realMoney || 0 }}</text>
        </view>
      </view>
      <view class="phone-fix-btm-btn">
        <view>
          <u-button type="error" shape="circle" @click="onSubmit">
            <text>立即购买</text>
          </u-button>
        </view>
      </view>
    </view> -->
    <u-modal :show="showModal" title="温馨提示" showCancelButton closeOnClickOverlay @close="showModal = false" @cancel="showModal = false" @confirm="confirmModal">
      <view class="slot-content" style="color: red">
        <rich-text nodes="电费充值0-72小时内到账，订单显示充值中时，禁止期间在其他平台充值，如充值失败，失败后的72小时内原路退回。"></rich-text>
      </view>
    </u-modal>
    <!-- 临时注释 -->
    <!-- <u-modal
      :show="showProtocolModal"
      title="是否接收绿色积分？"
      showCancelButton
      confirmText="是"
      cancelText="否"
      closeOnClickOverlay
      @close="showProtocolModal = false"
      @cancel="cancel"
      @confirm="confirm"
    >
      <view class="slot-content" style="display: flex; flex-direction: column; align-items: center">
        <image src="@/static/img/bibi.png" style="width: 164rpx; height: 164rpx"></image>
        <view style="display: flex; align-items: center; margin-top: 30rpx">
          <checkbox-group @change="checkboxChange">
            <label>
              <checkbox value="true" style="transform: scale(0.8)" :checked="greenPointsProtocol" />
            </label>
          </checkbox-group>
          <view>阅读并同意<text style="color: red" @tap="gotoLink">《绿色积分协议》</text></view>
        </view>
      </view>
    </u-modal> -->
  </view>
</template>

<script>
var app = getApp()
export default {
  components: {},
  data() {
    return {
      opt: {},
      pickerItems: [],
      regiondata: '',
      // 省市区
      cityPop: false,
      region: [],
      operatorList: [
        {
          name: '国网',
          id: 0,
          key: 'gw'
        },
        {
          name: '南网',
          id: 1,
          key: 'nw'
        }
      ],
      opSelect: 'gw',
      packageAllList: [],
      packageList: [
        // {name:"中国移动",id:1,key:"yd",price:"97.30",relPrice:"100.00"}
      ],
      packageSelect: 0,
      isSelect: true,
      notices: '',
      phone: '',
      idcard: '',
      realMoney: '',
      title: '电费充值',
      adsList: {
        electric: '电费充值',
        gas: '气费充值',
        water: '水费充值'
      },
      lifeList: [
        {
          name: '电费充值',
          id: 0,
          key: 'electric'
        }
        // {
        // 	name: "气费充值",
        // 	id: 1,
        // 	key: "gas"
        // },
        // {
        // 	name: "水费充值",
        // 	id: 2,
        // 	key: "water"
        // }
      ],
      life_type: 'electric',
      pagecontent: '',
      showModal: false,
      greenPointsProtocol: false, //是否同意绿色赠送协议
      showProtocolModal: false, //显示绿色积分弹窗
      Uswitch: false, //记住我的选择
      isTip: false //本次下单是否已提示过
    }
  },
  onLoad(e) {
    if (e.type) {
      this.life_type = e.type
      this.title = this.adsList[e.type]
    }
    this.opt = app.getopts(e)

    if (this.opt.token) {
      this.setlogin()
    } else {
      this.checkIsopen()
      this.loadData()
      this.loadContent()
      this.getAddress()
    }

    this.Uswitch = uni.getStorageSync('Uswitch').remember || false
    this.Uswitch ? (this.greenPointsProtocol = uni.getStorageSync('Uswitch').state) : (this.greenPointsProtocol = false)
  },
  onPullDownRefresh() {
    app.stopPullDownRefresh()
  },
  methods: {
    checkIsopen() {
      let that = this
      app.get(
        'ApiLifePay/getIsopen',
        {
          type: 'mobile'
        },
        function (res) {
          if (res.status != 1) {
            app.alert(res.msg)
          }
        }
      )
    },
    setlogin() {
      let that = this
      app.post('ApiIndex/logintogether', { gtksession: that.opt.token }, function (res) {
        if (res.status == 1) {
          //	that.login_token = res.login_token
          uni.setStorageSync('login_token', res.login_token)
          that.checkIsopen()
          that.loadData()
          that.loadContent()
          that.getAddress()
        }
      })
    },
    jumpOrder() {
      uni.navigateTo({
        url: '/pages/thirds/orderlist'
      })
    },
    jumpPhone() {
      uni.navigateTo({
        url: '/pages/thirds/phone-bill/phone-bill'
      })
    },
    getAddress() {
      var url = app.globalData.pre_url + '/static/area.json'
      var that = this
      uni.request({
        url: url,
        data: {},
        method: 'GET',
        // header: {
        //   'content-type': 'application/json'
        // },
        success: function (res2) {
          that.pickerItems = res2.data
        }
      })
    },
    regionchange(e) {
      const value = e.detail.value
      console.log(value[0].text + ',' + value[1].text + ',' + value[2].text)
      // this.regiondata = value[0].text + ',' + value[1].text + ',' + value[2].text
      this.regiondata = value[0].text + ',' + value[1].text
      this.region = [value[0].text, value[1].text]
    },
    packageSelectChange(id, now_money) {
      this.packageSelect = id
      this.realMoney = now_money
    },
    lifeTypeChange(key, name) {
      var that = this
      this.life_type = key
      this.title = name
      that.packageList = []
      this.packageAllList.forEach(item => {
        if (item.life_type == key) {
          that.packageList.push(item)
        }
      })
    },
    opSelectChange(key) {
      this.opSelect = key
      this.loadData()
      this.opSelect = key
    },
    cityChange(data) {
      if (data) {
        this.region = data
      }
    },
    async loadContent() {
      var that = this
      app.get(
        'ApiLifePay/payRule',
        {
          type: 'life'
        },
        function (res) {
          const res1 = res.data
          that.pagecontent = JSON.parse(res1.rule_info)
        }
      )
    },
    async loadData() {
      var that = this
      //   判断申请通过跳转商铺首页
      var area_type = 0
      switch (this.opSelect) {
        case 'nw':
          area_type = 1
          break
        case 'gw':
          area_type = 2
          break
      }
      app.get(
        'ApiLifePay/setMeal',
        {
          type: 'life',
          area_type: area_type
        },
        function (res) {
          const res1 = res.data
          that.packageAllList = res1
          that.lifeTypeChange(that.life_type, that.adsList[that.life_type])
        }
      )
    },
    async pays(order_id) {
      const params = {
        order_id: order_id,
        order_type: 31,
        is_wechat: 2,
        payment: 11
      }
      const res = await this.$requestAll.thirds.lifePay(params, true)
      res.data.code = res.data.code.replace(/\%/g, '+')
      app.navigateTo({
        url: '/other/pay/payCode?dd=' + encodeURIComponent(JSON.stringify(res.data))
      })
    },
    onSubmit() {
      if (!app.$u.trim(this.phone)) {
        app.error('请填写充值户号')
        return
      }
      if (this.opSelect == 'nw' && !app.$u.trim(this.idcard)) return app.error('请填写身份证后六位')
      if (this.region.length == 0) return app.error('请选择所在城市')
      if (this.packageSelect == 0) {
        app.error('请选择充值套餐')
        return
      }

      // 临时注释
      // if (!this.Uswitch && !this.greenPointsProtocol && !this.isTip) {
      //   this.showProtocolModal = true
      //   return
      // }
      // !
      this.showModal = true
    },
    // 勾选协议
    checkboxChange(e) {
      e.detail.value[0] == 'true' ? (this.greenPointsProtocol = true) : (this.greenPointsProtocol = false)
      this.Uswitch ? uni.setStorageSync('Uswitch', { remember: true, state: this.greenPointsProtocol }) : ''
    },
    gotoLink() {
      app.goto('/pages/index/webView?url=https://nnt.nndao.cc/top/protocol/jfsyxy.html')
    },
    changeUswitch(e) {
      uni.setStorageSync('Uswitch', { remember: e, state: this.greenPointsProtocol }) //记住状态
    },
    confirm() {
      if (!this.greenPointsProtocol) {
        app.error('请阅读并勾选协议')
        return
      }
      this.showProtocolModal = false
      this.isTip = true
    },
    cancel() {
      let that = this
      that.showProtocolModal = false
      uni.showModal({
        title: '提示',
        content: `本次交易将不会获得绿色积分!`,
        success: function (res) {
          if (res.confirm) {
            that.isTip = true
            that.greenPointsProtocol = false
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    },
    confirmModal() {
      app.showLoading({
        mask: true
      })
      const params = {
        account: this.phone,
        money: this.realMoney,
        set_id: this.packageSelect,
        type: this.opSelect,
        life_type: this.life_type,
        idcard: this.idcard,
        province: this.region[0],
        city: this.region[1],
        is_get_green: this.greenPointsProtocol ? 1 : 0
      }
      app.showLoading('提交中')

      app.post('ApiLifePay/lifePay', params, function (res) {
        app.showLoading(false)
        if (res.status == 0) {
          app.error(res.msg)
          return
        }
        app.goto('/pages/pay/pay?id=' + res.data.payorderid)
      })
    }
  },
  computed: {
    regionName() {
      // 转为字符串
      return this.region.map(item => item.name).join(' ')
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #f7f7f9;
}

view {
  box-sizing: border-box;
}

.phone-header {
  position: relative;

  &-tips {
    position: absolute;
    padding: 10upx 16upx;
    border-radius: 80upx 80upx;
    background-color: #fee1e1;
    display: flex;
    align-items: center;
    bottom: 54%;
    left: 30upx;

    text {
      font-size: 28upx;
      color: #ff6767;
      padding-left: 10upx;
    }
  }
}

.phone-container {
  padding: 20upx;
  background-color: #fff;
  border-radius: 35upx;

  &-top {
    padding: 20upx;

    &-title {
      font-size: 28upx;
      font-weight: bold;
    }
  }
  &-input {
    border-bottom: 1px solid #ececec;
    padding: 20upx;

    input {
      color: #282828;
      font-size: 36upx;
    }
  }
  &-group {
    &_title {
      font-size: 26upx;
      font-weight: bold;
      margin: 20upx 0;
      color: #747474;
    }

    &_list {
      display: flex;
      width: 100%;
      justify-content: space-between;
      flex-wrap: wrap;

      &-item {
        border: 1px solid #ecebe6;
        border-radius: 10upx 10upx;
        font-size: 28upx;
        padding: 26upx 10upx;
        text-align: center;
        margin-bottom: 10upx;
      }

      .select {
        border: 1px solid #42b993 !important;
        color: #42b993 !important;
        background-color: #d9ffee;
      }
    }
  }
}

.base-4 {
  width: 24%;
}

.base-3 {
  width: 32%;
}

.phone-fav {
  position: relative;
  margin-top: 20upx;
  margin-bottom: 20upx;

  &-item {
    position: absolute;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 40upx;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 26upx;
  }
}

.phone-notices {
  padding: 20upx 20upx;
  border-radius: 20upx 20upx;
  background-color: #fff;

  text {
    font-size: 28upx;
    font-weight: bold;
  }
}

.phone-fix-btm {
  position: fixed;
  width: 100%;
  height: 120upx;
  display: flex;
  align-items: center;
  background-color: #fff;
  bottom: 0;
  left: 0;
  padding: 0 30upx;

  &-left {
    flex: 1;
    font-size: 28upx;

    text {
      color: #ff6767;
      font-weight: bold;
      font-size: 33upx;
    }
  }

  &-btn {
    width: 40%;
  }
}

.color1 {
  color: #808080;
}

.check-this {
  background: white;
}
</style>
